<script>
    import SaveManager from "../../scripts/save/SaveManager.js";
    import MapManager from "../../scripts/maps/MapManager.js";
    import {createEventDispatcher, onMount} from "svelte";
    import action from "../../scripts/character/action.js";
    import {mapEventBus} from "../../eventbus/map_signal.js";
    import CharacterActionList from "../character/CharacterActionList.svelte";
    import ResourceActionList from "../resource/ResourceActionList.svelte";
    import NullActionList from "../cells/NullActionList.svelte";
    import BuilderManager from "../../scripts/Builder/BuilderManager.js";
    import BuilderActionList from "../building/BuilderActionList.svelte";

    let a;
    export let grid;
    let GRID_SIZE;
    let mapManager;
    let dispatch = new createEventDispatcher();
    let active = {col: null, row: null}
    let mousePosition = {x: 0, y: 0};
    let saveManager;
    let reload_code = Math.random();
    let show_flag_action_list = true


    mapEventBus.on("map-reload", (id = Math.random(), event = () => {
    }) => {
        console.log()
        mapManager = new MapManager(window) // 重新加载map
        saveManager = new SaveManager(window) // 存档重新加载
        mapManager.render(event)
        grid = mapManager.map_data
        reload_code = Math.random()

    });
    onMount(() => {

        mapManager = new MapManager(window)
        mapManager.render()
        grid = mapManager.map_data
    })

    function handleCellClick(row, col, event) {

        dispatch("map-click", {row, col})
        active = {
            col,
            row
        }
        mousePosition = {
            x: event.clientX,
            y: event.clientY
        };
        show_flag_action_list = true
    }

    function getImage(r, c) {
        let character = grid[r][c].character
        let actions = action.init(character)
        return actions.getImage()
    }

    function getResourceImage(resource) {
        return `/src/libs/images/resource/${resource}.png`
    }

    function getShowActionCellFlag(row, col) {
        return (
            active.col !== null &&
            JSON.stringify(grid[active.row][active.col].other) !== "{}"
        )
    }

    function clearStatus(i, j, event) {
        mapManager.remove_other_map_data()
        mapManager.render()
        mapEventBus.emit('map-reload', Math.random())
        handleCellClick(i, j, event)
    }

</script>
<!--<img src="" alt="">-->
{#key reload_code}
    {#if grid}
        <div class="chess-board">
            <table>
                <tbody>
                {#each grid as row, i}
                    <tr>
                        {#each row as cell, j}
                            <td
                                    data-row={i}
                                    data-col={j}
                                    class="cell"
                                    on:click={(event) => handleCellClick(i, j, event)}
                            >
                                {#if grid[i][j].character !== null}
                                    <img src="{getImage(i,j)}" alt="" class="character-sheet">
                                {:else if grid[i][j].resource !== null}
                                    <img src="{getResourceImage(grid[i][j].resource)}" alt="" class="character-sheet">
                                {:else if JSON.stringify(grid[i][j].other) !== "{}"}
                                {:else}
                                    <div class="none_cell" on:click={(event) => clearStatus(i, j, event)}></div>
                                {/if}
                                {#if JSON.stringify(grid[i][j].other) !== "{}"}
                                    <div class="color" style:background-color={grid[i][j].other.color}></div>
                                {/if}
                                {#if JSON.stringify(grid[i][j].building) !== "null"}
                                    <div class="build">
                                        <img src="{new BuilderManager(window).getBuilderImage(grid[i][j].building.id)}"
                                             class="build-sheet" alt="">
                                    </div>
                                {/if}
                            </td>

                        {/each}
                    </tr>
                {/each}
                </tbody>
            </table>
            {#if show_flag_action_list}
                {#if getShowActionCellFlag(active.row, active.col)}
                    <div
                            class="select-cell"
                            style="left: {mousePosition.x}px; top: {mousePosition.y}px;"
                            on:click={() => {show_flag_action_list = false}}
                    >
                        {#if grid[active.row][active.col].character !== null}
                            <CharacterActionList where={active}
                                                 character={action.init(grid[active.row][active.col].character)}/>
                        {/if}
                        {#if grid[active.row][active.col].resource !== null}
                            <ResourceActionList where={active} resource={grid[active.row][active.col]}/>
                        {/if}

                        {#if grid[active.row][active.col].building !== null}
                            <BuilderActionList where="{active}" />
                        {/if}


                        {#if mapManager}
                            {#if mapManager.isClear(grid[active.row][active.col])}
                                <NullActionList where={active}/>
                            {/if}
                        {/if}
                    </div>
                {/if}
            {/if}
        </div>
    {/if}

{/key}
<style>
    .none_cell {
        position: relative;
        height: 100%;
        width: 100%;
        content: '';
    }

    .select-cell {
        position: fixed;
        min-height: 200px;
        min-width: 130px;
        background: white;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 8px 30px rgba(0, 0, 0, 0.19);
        content: ' ';
        z-index: 999999999999;
        transform: translate(10px, 10px);
    }

    .cell {
        position: relative;
        z-index: 1;

    }

    .color {
        position: absolute;
        top: 0;
        z-index: 2;
        content: "";
        width: 100%;
        height: 100%;
    }

    .chess-board {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    table {
        border-collapse: collapse;
        background-color: #f0f0f0;
    }

    td {
        min-width: 30px;
        width: 35px;
        min-height: 30px;
        height: 35px;
        border: 1px solid #999;
        padding: 0;
        text-align: center;
        vertical-align: middle;
    }

    .build {
        z-index: 55;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    td:hover {
        background-color: #e0e0e0;
        cursor: pointer;
    }

    .character-sheet, .build-sheet {
        width: 80%;
        height: 80%;
        display: block;
        position: absolute;
        top: 10%;
        left: 10%;
        z-index: 3;
        margin: auto;
    }
</style>